<template>
    <div>
        <div id="profit" style="width:100%;height:400px;"></div>
        
    </div>

</template>

<script>
import echarts from 'echarts';

export default {
    data() {
        return {

        }
    },
    mounted() {

        let graphicsData = JSON.parse(localStorage.getItem('graphicsData'))

        let tradeChart = echarts.init(document.getElementById('profit'));
        let option = {
            title: {
                text: '利润',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: graphicsData.profitGraph.timeline
            },
            yAxis: {
                type: 'value',
                name: '利润'
            },
            dataZoom: [  // 滑动缩放
                {
                    // startValue: '11:10:11'
                },
                {
                    type: "inside", // 拖动x轴缩放
                },
            ],
            calculable: true,
            series: [
                {
                    data: graphicsData.profitGraph.dataDay,
                    type: 'line',
                    color: 'rgb(155,89,188)',
                    areaStyle: {
                        normal: {
                            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                offset: 0,
                                color: 'rgba(155,89,188,1)'
                            }, {
                                offset: .34,
                                color: 'rgba(155,89,188,0.25)'
                            }, {
                                offset: 1,
                                color: 'rgba(155,89,188,0.00)'
                            }])

                        },//区域颜色渐变
                    },
                    markLine: {
                        symbol: 'none',
                        label: {
                            // position:[10, 10],
                            color: '#000',
                            fontSize: 12,
                            formatter: "交易"
                        },
                        lineStyle: {
                            type: 'solid',
                            width: 1,
                            color: '#000'
                        },
                        data: [
                            { yAxis: -2000, name: '交易' },
                        ]
                    }
                },

            ]
        };
        tradeChart.setOption(option);

        window.addEventListener('resize', function () {
            tradeChart.resize();
        })


    },
    methods: {
    }
}
</script>
<style lang="scss" scoped></style>